<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input v-model="orderNum" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="buyerPhone" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item v-if="isStatus" label="订单状态">
        <el-select v-model="payStatus" placeholder="请选择">
          <el-option
            v-for="item in payStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="下单时间">-->
      <!--        <el-date-picker-->
      <!--          v-model="value2"-->
      <!--          type="daterange"-->
      <!--          align="right"-->
      <!--          unlink-panels-->
      <!--          range-separator="至"-->
      <!--          start-placeholder="开始日期"-->
      <!--          end-placeholder="结束日期"-->
      <!--          :picker-options="pickerOptions"-->
      <!--        />-->
      <!--      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" @click="restOrderList">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :height="tableHeight"
      header-cell-class-name="aa"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        align="center"
        type="index"
        width="50"
      />
      <el-table-column
        prop="orderNum"
        label="订单编号"
        width="180"
      />
      <el-table-column
        prop="buyerName"
        label="买家姓名"
        width="180"
      />
      <el-table-column
        prop="buyerPhone"
        label="买家电话"
      />
      <el-table-column
        prop="orderAmount"
        label="订单金额"
      />
      <el-table-column
        prop="createTime"
        label="下单时间"
      />
      <el-table-column
        prop="payStatus"
        label="订单状态"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payStatus == 0">未支付</span>
          <span v-else-if="scope.row.payStatus == 1 && (scope.row.sendNum == null || scope.row.sendNum =='')">未发货</span>
          <span v-else-if="scope.row.payStatus == 1 && (scope.row.sendNum != null && scope.row.sendNum != '')">已发货</span>
          <span v-else-if="scope.row.payStatus == 3">交易成功</span>
          <span v-else-if="scope.row.payStatus == 4">退货中</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openQueryInfo(scope.row)">查看</el-button>
          <el-button v-if="scope.row.payStatus == 1 && (scope.row.sendNum == null || scope.row.sendNum =='')" type="text" size="small" @click="openFahuo(scope.row)">发货</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pages">
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
      <el-steps :active="orderLogNum" align-center>
        <template v-for="item in orderLogList">
          <el-step :key="item.id" :title="item.typeName" :description="item.createTime" />
        </template>
      </el-steps>
      <el-row style="margin-top: 10px">
        <el-col :span="12">
          <div style="padding-bottom: 20px;">订单编号:{{ orderNums }}</div>
        </el-col>
        <el-col :span="12">
          <div style="padding-bottom: 20px">姓名:{{ buyerNames }}</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div style="padding-bottom: 20px">电话:{{ buyerPhones }}</div>
        </el-col>
        <el-col :span="12">
          <div style="padding-bottom: 20px">地址:{{ address }}</div>
        </el-col>
      </el-row>

      <el-row v-if="sendFlag">
        <el-col :span="12">
          <div style="padding-bottom: 20px">快递:{{ sendForm.type }}</div>
        </el-col>
        <el-col :span="12">
          <div style="padding-bottom: 20px">单号:{{ sendForm.num }}</div>
        </el-col>
      </el-row>

      <el-table :data="gridData">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"
        />
        <el-table-column
          prop="productImg"
          align="center"
          label="图片"
          width="100"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.productIcon"
              fit="fit"
            />
          </template>
        </el-table-column>
        <el-table-column property="productName" label="商品名称" width="150" />
        <el-table-column property="productPrice" label="价格" width="200" />
        <el-table-column property="productQuantity" label="数量" />
      </el-table>
    </el-dialog>
    <el-dialog title="发货" :visible.sync="dialogTableVisibleFahuo">
      <el-form>
        <el-form-item label="快递类型">
          <el-select v-model="sendForm.type" style="width: 260px" placeholder="请选择快递类型">
            <el-option label="中通" value="1" />
            <el-option label="韵达" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号">
          <el-input v-model="sendForm.num" style="width: 260px" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisibleFahuo = false">取 消</el-button>
        <el-button type="primary" @click="saveSend()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderListAllPage, getOrderInfo, getListByOrderId, saveSend } from '@/api/order'
export default {
  name: 'Index',
  data() {
    return {
      value2: '',
      tableHeight: window.innerHeight - 215,
      user: '',
      isStatus: true,
      payStatus: '',
      sendFlag: false,
      payStatusList: [{
        value: '0',
        label: '未支付'
      }, {
        value: '1',
        label: '未发货'
      }, {
        value: '2',
        label: '已发货'
      }, {
        value: '3',
        label: '交易成功'
      }, {
        value: '4',
        label: '退货'
      }],
      tableData: [],
      orderLogNum: 0,
      page: 1,
      pageSize: 10,
      total: 0,
      gridData: [{ date: '1', name: '2', address: '3' }],
      dialogTableVisible: false,
      address: '',
      orderNum: '',
      buyerPhone: '',
      buyerName: '',
      dialogTableVisibleFahuo: false,
      sendForm: {
        type: '',
        num: ''
      },
      orderLogList: [],
      orderId: '',
      buyerPhones: '',
      buyerNames: '',
      orderNums: ''
    }
  },
  mounted() {
    const path = this.$route.path
    const statusArr = path.split('/')
    const status = statusArr[statusArr.length - 1]
    if (status === '1') {
      this.payStatusList = [{
        value: '1',
        label: '未发货'
      }, {
        value: '2',
        label: '已发货'
      }]
    } else {
      this.isStatus = false
    }
    this.restOrderList()
  },
  methods: {
    getOrderListAllPage() {
      let newStatus = ''
      if (this.payStatus === '') {
        const path = this.$route.path
        const statusArr = path.split('/')
        const status = statusArr[statusArr.length - 1]
        newStatus = status === '1' ? '5' : status
      } else {
        newStatus = this.payStatus
      }
      const data = {
        page: this.page,
        pageSize: this.pageSize,
        payStatus: newStatus,
        buyerPhone: this.buyerPhone,
        orderNum: this.orderNum
      }
      getOrderListAllPage(data).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    search() {
      this.page = 1
      this.pageSize = 10
      this.getOrderListAllPage()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrderListAllPage()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getOrderListAllPage()
    },
    filterHandler(value, row, column) {
      console.log(value)
    },
    openQueryInfo(row) {
      console.log(row)
      this.dialogTableVisible = true
      this.address = row.buyerAddress
      this.orderNums = row.orderNum
      this.buyerPhones = row.buyerPhone
      this.buyerNames = row.buyerName
      if (row.payStatus == 1 && (row.sendNum != null && row.sendNum != '')) {
        this.sendFlag = true
        this.sendForm.type = row.sendType == 1 ? '中通快递' : '韵达快递'
        this.sendForm.num = row.sendNum
      } else {
        this.sendFlag = false
      }
      getOrderInfo(row.orderId).then(response => {
        this.gridData = response.data
      })
      this.getListByOrderId(row)
    },
    openFahuo(row) {
      this.dialogTableVisibleFahuo = true
      this.orderId = row.orderId
      this.sendForm.type = row.sendType
      this.sendForm.num = row.sendNum
    },
    getListByOrderId(row) {
      const arr = [
        { 'id': '0', 'orderId': '048ee55cfd2a483d8a0d8770985dad7a', 'type': '下单成功', 'createTime': '' },
        { 'id': '1', 'orderId': '048ee55cfd2a483d8a0d8770985dad7a', 'type': '支付成功', 'createTime': '' },
        { 'id': '2', 'orderId': '048ee55cfd2a483d8a0d8770985dad7a', 'type': '已发货', 'createTime': '' },
        { 'id': '3', 'orderId': '048ee55cfd2a483d8a0d8770985dad7a', 'type': '订单完成', 'createTime': '' }]

      getListByOrderId(row.orderId).then(response => {
        this.orderLogList = response.data
        this.orderLogNum = this.orderLogList.length
        // if (this.orderLogList.length !== 4) {
        //   for (let i = this.orderLogList.length; i < 4; i++) {
        //     this.orderLogList.push(arr[i])
        //   }
        // }
        // console.log(this.orderLogList)

        // for (let i = 0; i < this.orderLogList.length; i++) {
        //   if (this.orderLogList[i].type == 0) {
        //     this.orderLogList[i].type = '下单成功'
        //   }
        //   if (this.orderLogList[i].type == 1) {
        //     this.orderLogList[i].type = '支付成功'
        //   }
        //   if (this.orderLogList[i].type == 2) {
        //     this.orderLogList[i].type = '发货成功'
        //   }
        //   if (this.orderLogList[i].type == 4) {
        //     this.orderLogList[i].type = '订单完成'
        //   }
        // }
        // console.log(this.orderLogList)
      })
    },
    saveSend() {
      const data = {
        orderId: this.orderId,
        sendType: this.sendForm.type,
        sendNum: this.sendForm.num
      }
      saveSend(data).then(response => {
        this.dialogTableVisibleFahuo = false
        this.$notify({
          title: '成功',
          message: '发货成功',
          type: 'success'
        })
        this.restOrderList()
      })
    },
    restOrderList() {
      this.page = 1
      this.pageSize = 10
      this.buyerPhone = ''
      this.orderNum = ''
      this.payStatus = ''
      const path = this.$route.path
      const statusArr = path.split('/')
      const status = statusArr[statusArr.length - 1]
      const data = {
        page: this.page,
        pageSize: this.pageSize,
        payStatus: status === '1' ? '5' : status,
        buyerPhone: this.buyerPhone,
        orderNum: this.orderNum
      }
      getOrderListAllPage(data).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .pages{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 15px 0px;
  }
</style>
